<template>
  <div id="main">
    <!-- 锚点 -->
    <div class="card">
      <el-button type="primary" size="medium"><a href="#stroke">描边动画</a></el-button>
      <el-button type="primary" size="medium"><a href="#customized">加载动画</a></el-button>
      <el-button type="primary" size="medium"><a href="#clock">时钟仪表盘</a></el-button>
    </div>
    <!-- 描边动画  -------------------  效果 -->
    <el-divider id="stroke"></el-divider>
    <el-card class="box-card">
      <div slot="header">描边动画</div>
      <div ref="stroke" class="echarts"></div>
    </el-card>
    <!-- 加载动画  -------------------  效果 -->
    <el-divider id="customized"></el-divider>
    <el-card class="box-card">
      <div slot="header">加载动画</div>
      <div ref="customized" class="echarts"></div>
    </el-card>
    <!-- 时钟仪表盘  -------------------  效果 -->
    <el-divider id="clock"></el-divider>
    <el-card class="box-card">
      <div slot="header">时钟仪表盘</div>
      <div ref="clock" class="echarts" style="height: 500px;"></div>
    </el-card>


  </div>
</template>

<script>
import { get24TimePoint, getNumbers, get12Month } from '@/components/echarts/echartsAnimation/index.js'

export default {
  data() {
    return {}
  },
  mounted() {
    this.getStroke() // 描边动画
    this.getCustomized() // 加载动画
    this.getClock() // 时钟仪表盘

  },
  methods: {
    // 描边动画  -------------------  效果
    getStroke() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.stroke);
      var option = {
        graphic: { // 是原生图形元素组件
          elements: [{
            type: 'text', // 用 setOption 首次设定图形元素时必须指定
            left: 'center', // 描述怎么根据父元素进行定位 number | center
            top: 'center', // 描述怎么根据父元素进行定位 number | middle
            style: {
              text: 'Apache ECharts', // 文本块文字。可以使用 \n 来换行
              fontSize: 80, // 文字块字体大小
              fontWeight: 'bold', // 文字块字体是否加粗
              fill: 'transparent', // 填充色
              lineWidth: 1, // 笔画宽度
              stroke: '#000', // 笔画颜色
              lineDash: [0, 200],
              lineDashOffset: 0,
            },
            keyframeAnimation: { // 关键帧动画配置。支持配置为数组同时使用多个关键帧动画
              duration: 3000, // 动画时长，单位 ms
              loop: true, // 是否循环播放动画
              keyframes: [ // 动画的关键帧。数组中每一项为一个关键帧
                {
                  percent: 0.7,
                  style: {
                    fill: 'transparent', // 填充色
                    lineDashOffset: 200,
                    lineDash: [200, 0],
                  }
                },
                {
                  percent: 0.8,
                  style: {
                    fill: 'transparent', // 填充色
                  }
                },
                {
                  percent: 1,
                  style: {
                    fill: 'black', // 填充色
                  }
                },
              ]
            },
          }]
        }
      }
      myChart.setOption(option);
    },
    // 加载动画  -------------------  效果
    getCustomized() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.customized);
      var option = {
        graphic: { // 是原生图形元素组件
          elements: [{
            type: 'group', // group 是唯一的可以有子节点的容器
            left: 'center', // 描述怎么根据父元素进行定位 number | center
            top: 'center', // 描述怎么根据父元素进行定位 number | middle
            children: new Array(7).fill(0).map((val, i) => ({ // 子节点列表，其中项都是一个图形元素定义
              type: 'rect', // 矩形
              x: i * 20, // 元素的 x 像素位置
              shape: {
                x: 0, // 图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的横坐标值
                y: -40, // 图形元素的左上角在父节点坐标系（以父节点左上角为原点）中的纵坐标值
                width: 10, // 图形元素的宽度
                height: 80, // 图形元素的高度
              },
              style: {
                fill: '#5470c6', // 填充色
              },
              keyframeAnimation: {
                duration: 1000, // 动画时长，单位 ms
                delay: i * 200, // 动画延迟时长，单位 ms
                loop: true, // 是否循环播放动画
                keyframes: [ // 动画的关键帧。数组中每一项为一个关键帧
                  {
                    percent: 0.5,
                    scaleY: 0.3,
                    easing: 'cubicIn',
                  },
                  {
                    percent: 1,
                    scaleY: 1,
                    easing: 'cubicOut',
                  },
                ]
              }
            }))
          }]
        }
      }
      myChart.setOption(option);
    },
    // 时钟仪表盘  -------------------  效果
    getClock() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.clock);
      var option = {
        series: [
          {
            nane: 'hour',
            type: 'gauge',
            startAngle: 90, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度
            endAngle: -270, // 仪表盘结束角度
            min: 0, // 最小的数据值
            max: 12, // 最大的数据值
            splitNumber: 12, // 仪表盘刻度的分割段数
            clockwise: true, // 仪表盘刻度是否是顺时针增长 默认 - true
            axisLine: { // 仪表盘轴线相关配置
              lineStyle: { // 仪表盘轴线样式
                width: 15, // 轴线宽度
                color: [[1, 'rgba(0,0,0,0.7)']], // 仪表盘的轴线可以被分成不同颜色的多段
                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
                shadowBlur: 15, // 图形阴影的模糊大小
              }
            },
            splitLine: { // 分隔线样式
              lineStyle: { // 线的样式
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
                shadowBlur: 3, // 图形阴影的模糊大小
                shadowOffsetX: 1, // 阴影水平方向上的偏移距离
                shadowOffsetY: 2, // 阴影垂直方向上的偏移距离
              }
            },
            axisLabel: { // 刻度标签
              fontSize: 35, // 文字的字体大小
              distance: 25, // 标签与刻度线的距离
              formatter: function (value) { // 刻度标签的内容格式器
                if (value === 0) { return ''; }
                return value + ''
              }
            },
            anchor: { // 表盘中指针的固定点
              show: true, // 是否显示固定点
              icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
              showAbove: false, // 固定点是否显示在指针上面
              offsetCenter: [0, '-35%'], // 相对于仪表盘中心的偏移位置
              size: 120, // 固定点大小
              keepAspect: true, // 如果图标是 path:// 的形式，是否在缩放时保持该图形的长宽比
              itemStyle: { // 指针固定点样式
                color: '#707177', // 图形的颜色
              }
            },
            pointer: { // 仪表盘指针
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 12, // 指针宽度
              length: '55%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比
              offsetCenter: [0, '10%'], // 相对于仪表盘中心的偏移位置
              itemStyle: { // 指针样式
                color: '#C0911F', // 图形的颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色。支持的格式同color
                shadowBlur: 8, // 图形阴影的模糊大小
                shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              }
            },
            detail: { show: false, }, // 是否显示详情
            data: [{ value: 0, }] // 数据值
          },
          {
            name: 'minute',
            type: 'gauge',
            startAngle: 90, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度
            endAngle: -270, // 仪表盘结束角度
            min: 0, // 最小的数据值
            max: 60, // 最大的数据值
            clockwise: true, // 仪表盘刻度是否是顺时针增长 默认 - true
            axisLine: { show: false, }, // 是否显示仪表盘轴线
            splitLine: { show: false, }, // 是否显示分隔线
            axisTick: { show: false, }, // 是否显示刻度
            axisLabel: { show: false, }, // 是否显示标签
            pointer: { // 仪表盘指针
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 8, // 指针宽度
              length: '70%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比
              offsetCenter: [0, '10%'], // 相对于仪表盘中心的偏移位置
              itemStyle: { // 指针样式
                color: '#C0911F', // 图形的颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色。支持的格式同color
                shadowBlur: 8, // 图形阴影的模糊大小
                shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              }
            },
            anchor: { // 表盘中指针的固定点
              show: true, // 是否显示固定点
              size: 20, // 固定点大小
              showAbove: false, // 固定点是否显示在指针上面
              itemStyle: { // 指针固定点样式
                borderWidth: 15, // 描边线宽。为 0 时无描边
                borderColor: '#C0911F', // 固定点边框颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色。支持的格式同color
                shadowBlur: 8, // 图形阴影的模糊大小
                shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              }
            },
            detail: { show: false, }, // 是否显示详情
            data: [{ value: 0, }] // 数据值
          },
          {
            name: 'second',
            type: 'gauge',
            startAngle: 90, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度
            endAngle: -270, // 仪表盘结束角度
            min: 0, // 最小的数据值
            max: 60, // 最大的数据值
            animationEasingUpdate: 'bounceOut', // 数据更新动画的缓动效果
            clockwise: true, // 仪表盘刻度是否是顺时针增长 默认 - true
            axisLine: { show: false, }, // 是否显示仪表盘轴线
            splitLine: { show: false, }, // 是否显示分隔线
            axisTick: { show: false, }, // 是否显示刻度
            axisLabel: { show: false, }, // 是否显示标签
            pointer: { // 仪表盘指针
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 4, // 指针宽度
              length: '85%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比
              offsetCenter: [0, '10%'], // 相对于仪表盘中心的偏移位置
              itemStyle: { // 指针样式
                color: '#C0911F', // 图形的颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色。支持的格式同color
                shadowBlur: 8, // 图形阴影的模糊大小
                shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              }
            },
            anchor: { // 表盘中指针的固定点
              show: true, // 是否显示固定点
              size: 20, // 固定点大小
              showAbove: true, // 固定点是否显示在指针上面
              itemStyle: { // 指针固定点样式
                color: '#C0911F', // 固定点边框颜色
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色。支持的格式同color
                shadowBlur: 8, // 图形阴影的模糊大小
                shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              }
            },
            detail: { show: false, }, // 是否显示详情
            data: [{ value: 0, }] // 数据值
          }
        ]
      }
      myChart.setOption(option);
      setInterval(function () {
        var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes() + second / 60;
        var hour = (date.getHours() % 12) + minute / 60;
        option.animationDurationUpdate = 300; // 数据更新动画的时长
        myChart.setOption({
          series: [
            {
              name: 'hour',
              animation: hour !== 0, // 是否开启动画
              data: [{ value: hour }]
            },
            {
              name: 'minute',
              animation: minute !== 0, // 是否开启动画
              data: [{ value: minute }]
            },
            {
              name: 'second',
              animation: second !== 0, // 是否开启动画
              data: [{ value: second }]
            },
          ]
        })
      }, 1000)
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 85%;
  margin-bottom: 20px;
}

.card {
  width: 10%;
  height: 75%;
  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #888;
  position: fixed;
  top: 150px;
  right: 50px;
  z-index: 10;
}

.echarts {
  width: 90%;
  height: 350px;
  border: 1px solid black;
  margin: 10px auto 20px;
}

.echarts-box {
  width: 90%;
  height: 350px;
  border: 1px solid black;
  margin: 10px auto 20px;
  /* position: absolute; */

}
</style>



    <!-- getBar() {
      var echarts = require('echarts');
      var myChart = echarts.init(this.$refs.bar);
      var option = {}
      myChart.setOption(option);
    }, -->